<%-- 
    Document   : music
    Created on : Jul 22, 2013, 8:45:05 PM
    Author     : ShahanThai
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<c:if test="${empty username}">
<jsp:include page="header.jsp"/>
</c:if>
<c:if test="${not empty username}">
<jsp:include page="header1.jsp"/>
</c:if>

<div class="m-left">

    <div id="fb-root"></div>


    <div class="left-cm">
        <div class="hotman">
            <div class="b1"></div>
            <div class="b2"></div>
            <div class="b3"></div>
            <div class="b4"></div>
            <div class="pad" style="padding-bottom: 10px">
                <c:forEach var="tmp" items="${SONG}" >
                    <c:set var="song" value="${tmp}" />
                </c:forEach>
                <c:forEach var="tmp" items="${UPLOADER}" >
                    <c:set var="uploader" value="${tmp}" />
                </c:forEach>
                <div class="h-main">
                    <div class="pl_top">
                        <div class="datelast" nowrap>
                            <img src="css/images/bh4.gif" title="Uploader" />
                            <span><a href="" lass="gen"><span style="color: red"><b>${uploader.users.username}</b></span></a></span>
                            <img src="css/images/bh1.gif" title="${song.listened}" />
                            <span>${song.listened}</span>
                            <a href="" target="_blank"><img src="css/images/bh3.gif" title="${song.downloaded}" /></a>
                            <span>${song.downloaded}</span>
                            <img src="css/images/tain5.gif" title="${uploader.uploadDate}" />
                        </div>
                        <!--div class="plt-text"><a href="./mp3/us-uk/">Âu, Mỹ</a> -&gt; <a href="">Pop, rock...</a> -&gt; <a href="" title="My Immortal">My Immortal</a></div-->
                    </div>
                    <div class="pl_center">
                        <div class="pl-cl">

                            <div style="position: relative; z-index: 999; margin: 0px 10px 0px 0px; float: left; clear: left; width: 300px;"><!-- CSN_Player -->

                                <!--Music here -->

                                <audio autoplay="autoplay" controls="controls">
                                    <source src="<c:if test="${param.quality== 'l1'}" >${song.l1}</c:if><c:if test="${param.quality== 'l2'}" >${song.l2}</c:if><c:if test="${param.quality == 'l3'}" >${song.l3}</c:if>" />

                                </audio>
                                <div style="position: relative; margin: 0px 0px 0px 0px; float: left; clear: left; width: 300px;">

                                    <div class="gen" style="margin: 3px 1px 1px 1px;">Chất lượng:  <a href="ControllerServlet?btnAction=Listen&type=music&id=${song.songID}&quality=l1"><img src="css/images/128k<c:if test="${param.quality == 'l1'}" >_l</c:if>.png" border="0"></a> <a href="ControllerServlet?btnAction=Listen&type=music&id=${song.songID}&quality=l2"><img src="css/images/320k<c:if test="${param.quality == 'l2'}" >_l</c:if>.png" border="0"></a> <a href="ControllerServlet?btnAction=Listen&type=music&id=${song.songID}&quality=l3"><img src="css/images/m4a<c:if test="${param.quality == 'l3'}" >_l</c:if>.png" border="0"></a> </div>

                                    <!-- table cellpadding="0" cellspacing="0" class="forumnone">
					<tr>
						<td nowrap>
							<img id="like_img" src="./images/like.png" border="0" alt="Like" title="Like" height="20" onMouseOver="change_cursor2pointer(this);" onclick="like();"><img id="dislike_img" src="./images/dislike.png" border="0" alt="disLike" title="disLike" height="20" onMouseOver="change_cursor2pointer(this);" onclick="like(-1);">
						</td>
						<td nowrap>&nbsp;</td>
						<td width="100%"><table cellpadding="0" cellspacing="0" class="forumnone">
							<tr>
								<td align="center"><div id="like_value" class="gen" style="color: green;"></div></td>
								<td align="center"><div id="dislike_value" class="gen" style="color: red;"></div></td>
							</tr>
							<tr>
								<td id="like_cell" width="%" align="bottom" title="Like: %"><div style="height: 3px; border-bottom: 4px solid green"></div></td>
								<td id="dislike_cell" width="%" align="bottom" title="disLike: %"><div style="height: 3px; border-bottom: 4px solid red"></div></td>
							</tr>
						</table></td>
						<td valign="bottom" nowrap>&nbsp;</td>
					</tr>
					<tr height="5">
					</tr>
				</table -->


                                    <h1 class="viewtitle">${song.name} - ${song.artists.artistName}</h1>

                                    <a href=""><img src="css/images/button_favourite.gif" width="75" height="22" alt="Playlist" border="0"></a>
                                    <a href="" target="_blank"><img src="css/images/button_download.gif" width="75" height="22" alt="Downloads" border="0"></a>






                                    <!--div id="note" style="display: block; color: #888888">
                                        <div class="pltip"><div class="tip-cpl" style="margin-top: 10px">
                                                <div class="vt1"></div>
                                                <div class="vt2"></div>
                                                <div class="vt3"></div>
                                                <div class="vt4"></div>
                                                <div class="note-text">
                                                    <img src="css/images/warning.gif" width="16" height="16" alt="Warning" align="absmiddle"> <span class="gensmall"  style="color: #888888"><u><b>Ghi chú:</b></u> Bạn đang nghe bài hát <strong>My Immortal</strong> do ca sĩ <strong>Evanescence</strong> trình bày ở chất lượng âm thanh <i><span style="color: orange">500kbps</span></i>. Bạn có thể tuỳ chỉnh chất lượng âm thanh nghe online ở các mức <i>32kbps, 128kbps, 320kbps, 500kbps</i> bằng cách click chọn vào các nút bên dưới player. Chất lượng âm thanh cao nhất mà bạn có thể download là <i><span style="color: red">Lossless</span></i>. Bạn được phép nghe trực tuyến <b>My Immortal</b>, download <u>My Immortal</u> về máy và xem lyrics <i>My Immortal</i> hoàn toàn miễn phí. <span class="seohide">The song <b>My Immortal</b> by singer <b>Evanescence</b> shows that you are listening to the highest possible sound quality is <i><span style="color: red">Lossless</span></i>. You are allowed to listen online <strong>My Immortal</strong>, download <u>My Immortal</u> to your machine and see the lyrics <i>My Immortal</i> is free.</span>  </span>
                                                </div>
                                            </div>

                            </div>
                                    </div-->

                                </div>
                            </div>

                        </div>
                        <div class="pl-cr">
                            <div class="tip-cp4">
                                <div class="vt1"></div>
                                <div class="vt2"></div>
                                <div class="vt3"></div>
                                <div class="vt4"></div>
                                <div class="tip-text">

                                    <div id="fulllyric" style="font-size: 13px; overflow: auto;">
                                        <img src="${song.albums.imageUrl}" width="120" height="120" align="right" onmouseover="this.width=300; this.height=300; this.style.marginLeft='30px';" onmouseout="this.width=120; this.height=120; this.style.marginLeft='0px';">
                                        <p><span class="maintitle"><strong><a href="">${song.name}</a></strong></span></p>
                                        <p><u>Ca sĩ:</u> <b><a href="">${song.artists.artistName}</a></b></p>
                                        <p><u>Sáng tác:</u> <b><a href="">${song.musicians.musicianName}</a></b></p>
                                        <c:if test="${not empty song.albums.albumName}"><p><u>Album:</u> <b><a href="ControllerServlet?btnAction=Search&searchValue=${song.albums.albumName}&type=Album">${song.albums.albumName}</a> <a href="ControllerServlet?btnAction=Listen&type=album&id=${song.albums.albumID}" ><img src="css/images/album_listen.png" width="68" height="12" border="0" alt="Listen Album" align="absmiddle"></a></b></p></c:if>
                                        <p><u>Năm phát hành:</u> <b>${song.publishYear}</b></p>

                                        <p class="genmed" style="font-size: 13px;">${song.lyrics}</p>

                                    </div>
                                    <div id="morelyric" style="cursor:pointer" onclick="show_fulllyric();" class="gen" align="right"></div>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="css/javascript/jquery.min.js"></script>
    <script src="css/javascript/jquery-ui.min.js"></script>
    <script src="css/javascript/jquery.tmpl.min.js"></script>
    <script language="JavaScript" type="text/javascript">
        <!--
        window.___gcfg = {lang: 'vi'};

        (function() {
            var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
            po.src = 'https://apis.google.com/js/plusone.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
        })();

        var lyric_expand = '<p>Xem thêm lời bài hát <img src="css/images/csn/xt3.gif"></p>';
        var lyric_collapse = '<p>Thu gọn <img src="css/images/csn/xt4.gif"></p>';
        function show_fulllyric()
        {
            if (document.getElementById('morelyric').innerHTML == lyric_expand)
            {
                document.getElementById('fulllyric').setAttribute('style', "font-size: 13px; overflow: auto;");
                document.getElementById('morelyric').innerHTML = lyric_collapse;
            }
            else if (document.getElementById('fulllyric').offsetHeight > 580)
            {
                document.getElementById('fulllyric').setAttribute('style', "font-size: 13px; max-height: 550px; overflow: hidden;");
                document.getElementById('morelyric').innerHTML = lyric_expand;
            }
        }
        show_fulllyric();

        function show_hide_share(shareid) {
            if ( document.getElementById(shareid).style.display == "none" )
            {
                document.getElementById(shareid).style.display = "block";
            }
            else
            {
                document.getElementById(shareid).style.display = "none";
            }
        }


        function select_all(obj)
        {
            var text_val=eval(obj);
            text_val.focus();
            text_val.select();
            if (!document.all) return; // IE only
            r = text_val.createTextRange();
            r.execCommand('copy');
        }

        /*
    var liked = ;
    var disliked = ;
    var d = new Date();
    var current_time = d.getTime();
    function like(mode)
    {
            if (liked || disliked)
            {
                    return;
            }

            var d2 = new Date();
            var current_time2 = d2.getTime();
            if ( (current_time2 - current_time) / 1000 < 5 )
            {
                    alert('Ban chua nghe xong bai hat nay!');
                    current_time = current_time2;
                    return;
            }

            (mode == -1) ? disliked = true : liked = true;
            $.post("http://chiasenhac.com/like.php?m=1013070", {
                    mode: (mode == -1) ? 'dislike' : 'like',
            },
            function(data){
                    // Success
                    if (mode == -1)
                    {
                            document.getElementById('dislike_img').src = "./images/disliked.png";
                            document.getElementById('dislike_value').innerHTML =  + 1;
                            //$("#dislike_cell").width('30%');
                            //$("#like_cell").width('70%');
                            var like_percent = Math.round(1000 *  / ( +  + 1)) / 10;
                            var dislike_percent = 100 - like_percent;
                            disliked = true;
                    }
                    else
                    {
                            document.getElementById('like_img').src = "./images/liked.png";
                            document.getElementById('like_value').innerHTML =  + 1;
                            var dislike_percent = Math.round(1000 *  / ( +  + 1)) / 10;
                            var like_percent = 100 - dislike_percent;
                            liked = true;
                    }
                    document.getElementById('like_cell').width = like_percent.toString() + '%';
                    document.getElementById('dislike_cell').width = dislike_percent.toString() + '%';
                    document.getElementById('like_cell').title = 'Like: ' + like_percent.toString() + '%';
                    document.getElementById('dislike_cell').title = 'disLike: ' + dislike_percent.toString() + '%';
            });
    }

    if (liked) document.getElementById('like_img').src = "./images/liked.png";
    if (disliked) document.getElementById('dislike_img').src = "./images/disliked.png";
    var dislike_percent = ( +  > 0) ? Math.round(1000 *  / ( + )) / 10 : 50;
    var like_percent = 100 - dislike_percent;
    document.getElementById('like_cell').width = like_percent.toString() + '%';
    document.getElementById('dislike_cell').width = dislike_percent.toString() + '%';
    document.getElementById('like_cell').title = 'Like: ' + like_percent.toString() + '%';
    document.getElementById('dislike_cell').title = 'disLike: ' + dislike_percent.toString() + '%';

    function change_cursor2pointer(obj)
    {
            if (!liked && !disliked)
            {
                    obj.style.cursor = 'pointer';
            }
            else if (obj.style.cursor == 'pointer')
            {
                    obj.style.cursor = 'default';
            }
    }*/

        //-->
    </script>

    <div class="left-cm"><div class="hotman">
            <div class="b1"></div><div class="b2"></div><div class="b3"></div><div class="b4"></div>
            <div class="pad" style="padding-bottom: 10px"><div class="h-main"><div class="page-dsms" style="margin-top: 0px"><div class="bod">
                            <div class="vt11"></div><div class="vt21"></div><div class="vt31"></div><div class="vt41"></div>


                            <table cellspacing="0" cellpadding="0">
                                <tr height="30">
                                    <td colspan="5" align="center"><span class="viewtitle"><b>${song.name} - ${song.artists.artistName}</b></span></td>
                                </tr>
                                <tr>
                                    <td width="32%" valign="top">
                                        <table cellpadding="2" cellspacing="1" width="100%" class="tbtable">
                                            <tr>
                                                <th class="catLeft" height="25" align="center" colspan="2"><span class="cattitle">Cùng ca sĩ</span></th>
                                            </tr>
                                            <c:forEach var="sa" items="${SAMEARTIST}" varStatus="counter">
                                                <tr class="${(counter.count mod 2)+1}" >
                                                    <td align="center" width="50" nowrap><span class="gen">${counter.count}</span></td>
                                                    <td><div class="musicinfo">
                                                            <a href="ControllerServlet?btnAction=Listen&type=music&id=${sa.songID}&quality=l3" class="musictitle" title="${sa.name} - ${sa.artists.artistName}">${sa.name}</a>
                                                            <p class="gen">${sa.artists.artistName}</p>
                                                        </div></td>
                                                </tr>
                                            </c:forEach>
                                        </table>
                                        <div align="right" class="gensmall"><a href="ControllerServlet?btnAction=Search&searchValue=${song.artists.artistName}&type=Artist" title="Cùng ca sĩ ${song.artists.artistName}">Xem thêm...</a></div>

                                    </td>

                                    <td width="2%"> </td>

                                    <td width="32%" valign="top">

                                        <table cellpadding="2" cellspacing="1" width="100%" class="tbtable">
                                            <tr>
                                                <th class="catLeft" height="25" align="center" colspan="2"><span class="cattitle">Bài hát liên quan</span></th>
                                            </tr>
                                            <c:forEach var="sa" items="${RELATIVESONG}" varStatus="counter">
                                                <tr class="${(counter.count mod 2)+1}" >
                                                    <td align="center" width="50" nowrap><span class="gen">${counter.count}</span></td>
                                                    <td><div class="musicinfo">
                                                            <a href="ControllerServlet?btnAction=Listen&type=music&id=${sa.songID}&quality=l3" class="musictitle" title="${sa.name} - ${sa.artists.artistName}">${sa.name}</a>
                                                            <p class="gen">${sa.artists.artistName}</p>
                                                        </div></td>
                                                </tr>
                                            </c:forEach>
                                        </table>
                                        <div align="right" class="gensmall"><a href="ControllerServlet?btnAction=Search&searchValue=${song.name}&type=none" title="Bài hát liên quan ${song.name}">Xem thêm...</a></div>

                                    </td>

                                    <td width="2%"> </td>

                                    <td width="32%" valign="top">

                                        <table cellpadding="2" cellspacing="1" width="100%" class="tbtable">
                                            <tr>
                                                <th class="catLeft" height="25" align="center" colspan="2"><span class="cattitle">Cùng thể loại</span></th>
                                            </tr>
                                            <c:forEach var="sa" items="${SAMEGENRE}" varStatus="counter">
                                                <tr class="${(counter.count mod 2)+1}" >
                                                    <td align="center" width="50" nowrap><span class="gen">${counter.count}</span></td>
                                                    <td><div class="musicinfo">
                                                            <a href="ControllerServlet?btnAction=Listen&type=music&id=${sa.songID}&quality=l3" class="musictitle" title="${sa.name} - ${sa.artists.artistName}">${sa.name}</a>
                                                            <p class="gen">${sa.artists.artistName}</p>
                                                        </div></td>
                                                </tr>
                                            </c:forEach>
                                        </table>
                                        <div align="right" class="gensmall"><a href="ControllerServlet?btnAction=Search&searchValue=${song.genres.genreName}&type=none">Xem thêm...</a></div>

                                    </td>

                                </tr>
                            </table>

                        </div></div></div></div></div></div>

    <div id="comments_body">                    <div class="left-cm" style="margin-top: 10px">
            <div class="hotman">
                <div class="b1">
                </div>
                <div class="b2">
                </div>
                <div class="b3">
                </div>
                <div class="b4">
                </div>
                <div class="pad" style="padding-bottom: 10px">
                    <div class="h-main">
                        <div class="md-top">
                            <div class="md-t">
                                Cảm nhận: ${song.name} </div>
                            <div id="write_comment_txt" class="md-c">
                                <img src="css/images/tain6.gif" />
                                <span><a href="" class="nav">Viết cảm nhận</a></span>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <a name="comment_postfrm"></a>
        <div class="left-cm" id="write_comment" style="margin-top: 10px; display: none;">
            <div class="hotman">
                <div class="b1">
                </div>
                <div class="b2">
                </div>
                <div class="b3">
                </div>
                <div class="b4">
                </div>
                <div class="pad" style="padding-bottom: 10px">
                    <div class="h-main">
                        <textarea id="message" name="message" rows="4" wrap="virtual" style="width:663px; height:80px; float:left;	border-bottom:1px solid #DCDCDC; margin-top:5px;" maxlength="2000" class="post"></textarea>
                        <div class="titd">
                            <p class="gui"><input id="post_comment" name="post_comment" onclick="post_comment();" type="button" class="btgui" value="" /></p>
                        </div>
                    </div>
                    <div align="right" class="point" id="post_comment_note"></div>
                </div>
            </div>
        </div>

    </div>

</div>

<jsp:include page="mainRight.jsp"/>
<jsp:include page="footer.jsp"/>

